import React, { Component } from 'react';
import { setList, delList } from '../../../store/actions'
import { connect } from 'react-redux'
import { List, InfiniteScroll, Dropdown, Space, Radio, Button } from 'antd-mobile'
class Index extends Component {
	state = {
		pageSize: 10,
		pageCode: 1,
		// a 默认排序
		// b 价格升序
		// c 价格降序
		value: 'a'
	}
	// 排序
	filterSort = () => {
		const { list } = this.props
		const { value } = this.state
		if (value === 'a') return list
		if (value === 'b') {
			return [...list].sort((a, b) => {
				return a.price - b.price
			})
		}

		if (value === 'c') {
			return [...list].sort((a, b) => {
				return b.price - a.price
			})
		}
	}
	handleDelete(v) {
		this.props.dispatch(delList(v))
	}
	componentDidMount() {
		this.props.list.length === 0 && this.props.dispatch(setList())
	}
	render() {
		const { list } = this.props
		const { pageCode, pageSize, value } = this.state
		return (
			<div>
				<div>
					<Dropdown>
						<Dropdown.Item key='sorter' title='排序'>
							<div style={{ padding: 12 }}>
								<Radio.Group
									value={value}
									onChange={value => this.setState({ value })}
								>
									<Space direction='vertical' block>
										<Radio block value='a'>
											综合排序
										</Radio>
										<Radio block value='b'>
											按照价钱升序
										</Radio>
										<Radio block value='c'>
											按照价钱降序序
										</Radio>
									</Space>
								</Radio.Group>
							</div>
						</Dropdown.Item>
						<Dropdown.Item key='bizop' title='商机筛选'>
							<div style={{ padding: 12 }}>
								商机筛选内容
								<br />
								商机筛选内容
								<br />
								商机筛选内容
								<br />
							</div>
						</Dropdown.Item>
						<Dropdown.Item key='more' title='更多筛选'>
							<div style={{ padding: 12 }}>
								更多筛选内容
								<br />
								更多筛选内容
								<br />
							</div>
						</Dropdown.Item>
					</Dropdown>
				</div>
				<List>
					{
						// 先排序  在切割
						list.length > 0 && this.filterSort().slice(0, pageCode * pageSize).map((v, i) => {
							return <List.Item
								key={i}
								prefix={<img src={v.url}></img>}
								description={v.desc}
							>
								<p>{v.title}</p>
								<p style={{ color: 'red' }}>
									<b>￥{v.price}</b>
									<Button color="danger" onClick={ () => this.handleDelete(v) }>删除</Button>
								</p>
							</List.Item>
						})
					}
				</List>
				{/* 滑到底部 hasMore为真值  会执行 loadMore  */}
				{/* 滑到底部 hasMore为假值  底部提示 没有更多数据  */}
				<InfiniteScroll loadMore={() => this.setState({ pageCode: pageCode + 1 })} hasMore={list.length >= pageCode * pageSize}></InfiniteScroll>
			</div>
		);
	}
}

export default connect(state => state, dispatch => ({ dispatch }))(Index);
